<template>
  <div class="doctor-personal-profile">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="10" animated>
        <template #default>
          <div class="skeleton-header">
            <el-skeleton-item variant="circle" style="width: 100px; height: 100px;" />
            <div class="skeleton-info">
              <el-skeleton-item variant="h1" style="width: 200px;" />
              <el-skeleton-item variant="text" style="width: 150px;" />
              <el-skeleton-item variant="text" style="width: 300px;" />
            </div>
          </div>
          <div class="skeleton-stats">
            <el-skeleton-item variant="rect" style="width: 200px; height: 80px;" />
            <el-skeleton-item variant="rect" style="width: 200px; height: 80px;" />
            <el-skeleton-item variant="rect" style="width: 200px; height: 80px;" />
            <el-skeleton-item variant="rect" style="width: 200px; height: 80px;" />
          </div>
          <div class="skeleton-cards">
            <el-skeleton-item variant="rect" style="width: 100%; height: 300px;" />
            <el-skeleton-item variant="rect" style="width: 100%; height: 300px;" />
          </div>
        </template>
      </el-skeleton>
    </div>

    <!-- 主要内容容器 -->
    <div v-else class="profile-container">
      <!-- 个人头部卡片 -->
      <div class="profile-header-card">
        <!-- 魔法粒子效果 -->
        <div class="magic-particles"></div>
        
        <div class="header-gradient">
          <div class="avatar-section">
            <div class="avatar-container">
              <el-avatar :size="100" class="main-avatar" :src="doctorInfo.avatarUrl" @error="() => console.error('个人资料页面头像加载失败:', doctorInfo.avatarUrl)">
                <el-icon size="40"><User /></el-icon>
              </el-avatar>
              <div class="avatar-badge">
                <el-icon><Star /></el-icon>
              </div>
            </div>
            <el-button 
              class="change-avatar-btn" 
              size="small" 
              round 
              @click="changeAvatar"
              :loading="uploadingAvatar"
              :disabled="uploadingAvatar"
            >
              <el-icon v-if="!uploadingAvatar"><Camera /></el-icon>
              {{ uploadingAvatar ? '上传中...' : '更换头像' }}
            </el-button>
            <!-- 隐藏的文件输入框 -->
            <input 
              ref="avatarInputRef" 
              type="file" 
              accept="image/*" 
              style="display: none" 
              @change="handleAvatarUpload"
            />
          </div>
          
          <div class="profile-info">
            <h1 class="doctor-name">{{ doctorInfo.name || '张医生' }}</h1>
            <p class="doctor-title">{{ doctorInfo.title || '主治医师' }}</p>
            <div class="doctor-tags">
              <span class="tag primary">{{ doctorInfo.department || '心理科' }}</span>
              <span class="tag success">{{ doctorInfo.specialization || '心理咨询、认知行为治疗' }}</span>
              <span class="tag warning">{{ doctorInfo.experience || '8' }}年经验</span>
            </div>
            <div class="contact-info">
              <div class="contact-item">
                <el-icon><Phone /></el-icon>
                <span>{{ doctorInfo.phone || '15354400311' }}</span>
              </div>
              <div class="contact-item">
                <el-icon><Message /></el-icon>
                <span>{{ doctorInfo.email || '15354400371@139.com' }}</span>
              </div>
            </div>
          </div>
          
        </div>
      </div>

      <!-- 统计卡片 -->
      <div class="stats-section">
        <div class="stat-card" v-for="(stat, index) in workStats" :key="index">
          <div class="stat-icon" :class="stat.color">
            <el-icon :size="24">
              <component :is="stat.icon" />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
        </div>
      </div>

      <!-- 详细信息网格 -->
      <div class="content-grid">
        <!-- 基本信息 -->
        <div class="info-card modern">
          <div class="card-header">
            <div class="header-icon primary">
              <el-icon><User /></el-icon>
            </div>
            <div class="header-text">
              <h3>基本信息</h3>
              <p>个人基础资料</p>
            </div>
            <el-button text class="edit-btn" @click="editBasicInfo">
              <el-icon><Edit /></el-icon>
            </el-button>
          </div>
          <div class="card-content">
            <div class="info-row" v-for="item in basicInfoItems" :key="item.label">
              <div class="info-label">
                <el-icon class="label-icon">
                  <component :is="item.icon" />
                </el-icon>
                {{ item.label }}
              </div>
              <div class="info-value">{{ item.value }}</div>
            </div>
          </div>
        </div>

        <!-- 专业资质 -->
        <div class="info-card modern">
          <div class="card-header">
            <div class="header-icon success">
              <el-icon><Medal /></el-icon>
            </div>
            <div class="header-text">
              <h3>专业资质</h3>
              <p>执业相关证书</p>
            </div>
            <el-button text class="edit-btn" @click="editQualifications">
              <el-icon><Edit /></el-icon>
            </el-button>
          </div>
          <div class="card-content">
            <div class="info-row" v-for="item in qualificationItems" :key="item.label">
              <div class="info-label">
                <el-icon class="label-icon">
                  <component :is="item.icon" />
                </el-icon>
                {{ item.label }}
              </div>
              <div class="info-value">{{ item.value }}</div>
            </div>
          </div>
        </div>

        <!-- Docker系统信息 -->
        <div class="info-card modern">
          <div class="card-header">
            <div class="header-icon info">
              <el-icon><Monitor /></el-icon>
            </div>
            <div class="header-text">
              <h3>系统信息</h3>
              <p>Docker容器状态</p>
            </div>
            <div class="status-indicator online">
              <span class="status-dot"></span>
              在线
            </div>
          </div>
          <div class="card-content">
            <div class="docker-stats">
              <div class="docker-item">
                <div class="docker-label">容器ID</div>
                <div class="docker-value mono">{{ dockerInfo.containerId }}</div>
              </div>
              <div class="docker-item">
                <div class="docker-label">镜像版本</div>
                <div class="docker-value">{{ dockerInfo.imageVersion }}</div>
              </div>
              <div class="docker-item">
                <div class="docker-label">端口映射</div>
                <div class="docker-value mono">{{ dockerInfo.portMapping }}</div>
              </div>
              <div class="docker-item">
                <div class="docker-label">运行状态</div>
                <div class="docker-value">
                  <span class="status-badge running">{{ dockerInfo.status }}</span>
                </div>
              </div>
              <div class="docker-item">
                <div class="docker-label">最后更新</div>
                <div class="docker-value">{{ formatDate(dockerInfo.lastUpdated) }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 账户安全 -->
        <div class="info-card modern">
          <div class="card-header">
            <div class="header-icon warning">
              <el-icon><Lock /></el-icon>
            </div>
            <div class="header-text">
              <h3>账户安全</h3>
              <p>密码与安全设置</p>
            </div>
          </div>
          <div class="card-content">
            <div class="security-actions">
              <div class="security-item" @click="changePassword">
                <div class="security-icon">
                  <el-icon><Key /></el-icon>
                </div>
                <div class="security-text">
                  <div class="security-title">修改密码</div>
                  <div class="security-desc">定期更新登录密码</div>
                </div>
                <el-icon class="arrow-icon"><ArrowRight /></el-icon>
              </div>
              <div class="security-item" @click="manageFaceRecognition">
                <div class="security-icon">
                  <el-icon><Camera /></el-icon>
                </div>
                <div class="security-text">
                  <div class="security-title">人脸识别</div>
                  <div class="security-desc">管理人脸登录设置</div>
                </div>
                <el-icon class="arrow-icon"><ArrowRight /></el-icon>
              </div>
              <div class="security-item" @click="viewLoginHistory">
                <div class="security-icon">
                  <el-icon><Clock /></el-icon>
                </div>
                <div class="security-text">
                  <div class="security-title">登录历史</div>
                  <div class="security-desc">查看最近登录记录</div>
                </div>
                <el-icon class="arrow-icon"><ArrowRight /></el-icon>
              </div>
            </div>
          </div>
        </div>

        <!-- 个人简介 -->
        <div class="info-card modern full-width">
          <div class="card-header">
            <div class="header-icon primary">
              <el-icon><Document /></el-icon>
            </div>
            <div class="header-text">
              <h3>个人简介</h3>
              <p>专业背景与个人描述</p>
            </div>
            <el-button text class="edit-btn" @click="editBio">
              <el-icon><Edit /></el-icon>
            </el-button>
          </div>
          <div class="card-content">
            <div class="bio-content">
              {{ doctorInfo.bio || '暂无个人简介，点击编辑添加您的专业背景和个人描述...' }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 密码修改对话框 -->
    <el-dialog
      v-model="passwordDialogVisible"
      title="修改密码"
      width="450px"
      :close-on-click-modal="false"
    >
      <el-form :model="passwordForm" label-width="100px" label-position="left">
        <el-form-item label="当前密码">
          <el-input
            v-model="passwordForm.currentPassword"
            type="password"
            placeholder="请输入当前密码"
            show-password
            autocomplete="current-password"
          />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            placeholder="请输入新密码（至少6位）"
            show-password
            autocomplete="new-password"
          />
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            placeholder="请再次输入新密码"
            show-password
            autocomplete="new-password"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelPasswordChange">取消</el-button>
          <el-button type="primary" @click="submitPasswordChange">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getDoctorProfile, updateDoctorProfile, changeDoctorPassword, uploadDoctorAvatar } from '../../api/doctor.js'
import {
  User, Star, Camera, Phone, Message, Edit, Medal, Monitor,
  Lock, Key, ArrowRight, Clock, Document, CreditCard, OfficeBuilding, 
  Suitcase, Timer, TrendCharts, UserFilled, Calendar, Files
} from '@element-plus/icons-vue'

const router = useRouter()

// 加载状态
const loading = ref(true)

// 响应式数据
const doctorInfo = reactive({
  name: '',
  title: '',
  department: '',
  specialization: '',
  experience: 0,
  phone: '',
  email: '',
  doctorNo: '',
  gender: 1, // 1=男，2=女
  age: 0,
  qualificationNo: '',
  idCard: '',
  level: '',
  bio: '',
  avatarUrl: '' // 头像URL
})

// 文件输入框引用
const avatarInputRef = ref(null)

// 密码修改对话框
const passwordDialogVisible = ref(false)
const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 上传状态
const uploadingAvatar = ref(false)

const dockerInfo = reactive({
  userId: 'doctor_001',
  containerId: 'warm-star-app-001',
  status: 'Running',
  imageVersion: 'v2.1.3',
  portMapping: '8080:80',
  lastUpdated: new Date()
})

// 工作统计数据
const workStats = ref([
  {
    icon: 'UserFilled',
    label: '总患者数',
    value: '128',
    color: 'primary'
  },
  {
    icon: 'Calendar',
    label: '今日预约',
    value: '5',
    color: 'success'
  },
  {
    icon: 'Files',
    label: '诊疗记录',
    value: '342',
    color: 'info'
  },
  {
    icon: 'TrendCharts',
    label: '满意度',
    value: '98%',
    color: 'warning'
  }
])

// 基本信息项目
const basicInfoItems = computed(() => [
  { label: '医生工号', value: doctorInfo.doctorNo || '未设置', icon: 'CreditCard' },
  { label: '姓名', value: doctorInfo.name || '未设置', icon: 'User' },
  { label: '性别', value: getGenderText(doctorInfo.gender), icon: 'User' },
  { label: '年龄', value: doctorInfo.age || '未设置', icon: 'Clock' },
  { label: '联系电话', value: doctorInfo.phone || '未设置', icon: 'Phone' },
  { label: '邮箱地址', value: doctorInfo.email || '未设置', icon: 'Message' }
])

// 专业资质项目
const qualificationItems = computed(() => [
  { label: '医师资格证号', value: doctorInfo.qualificationNo || '未设置', icon: 'Medal' },
  { label: '身份证号', value: maskIdCard(doctorInfo.idCard), icon: 'CreditCard' },
  { label: '所属科室', value: doctorInfo.department || '未设置', icon: 'OfficeBuilding' },
  { label: '专业特长', value: doctorInfo.specialization || '未设置', icon: 'Suitcase' },
  { label: '从业年限', value: `${doctorInfo.experience || 0}年`, icon: 'Timer' },
  { label: '职业等级', value: doctorInfo.level || '未设置', icon: 'TrendCharts' }
])

// 工具函数
const getGenderText = (gender) => {
  // 支持多种格式：数字(1=男,2=女)、字符串('M'/'F')、中文('男'/'女')
  if (gender === 1 || gender === '1') return '男'
  if (gender === 2 || gender === '2') return '女'
  if (gender === 'M' || gender === 'male' || gender === '男') return '男'
  if (gender === 'F' || gender === 'female' || gender === '女') return '女'
  return '未设置'
}

const maskIdCard = (idCard) => {
  if (!idCard) return '未设置'
  
  // 如果已经是脱敏格式，直接返回
  if (idCard.includes('*')) return idCard
  
  // 转换为字符串并处理
  const idStr = String(idCard)
  
  // 18位身份证脱敏：显示前6位和后4位，中间8位用*代替
  if (idStr.length === 18) {
    return idStr.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2')
  }
  
  // 15位身份证脱敏：显示前6位和后3位，中间6位用*代替
  if (idStr.length === 15) {
    return idStr.replace(/(\d{6})\d{6}(\d{3})/, '$1******$2')
  }
  
  // 其他情况：如果长度不匹配，只显示前3位和后2位
  if (idStr.length > 5) {
    return idStr.substring(0, 3) + '***' + idStr.substring(idStr.length - 2)
  }
  
  return idStr
}

const formatDate = (date) => {
  if (!date) return '未知'
  return new Date(date).toLocaleString('zh-CN')
}

// 生命周期
onMounted(() => {
  loadDoctorInfo()
  loadDockerInfo()
})

// 数据加载函数
const loadDoctorInfo = async () => {
  try {
    loading.value = true
    
    // 从localStorage获取当前登录医生ID
    const doctorId = localStorage.getItem('doctorId') || localStorage.getItem('userId') || '1'
    
    console.log('正在加载医生信息，ID:', doctorId)
    
    // 调用后端API获取医生信息
    const response = await getDoctorProfile(doctorId)
    
    if (response && response.data) {
      const data = response.data
      console.log('🎯 [Profile] 医生信息加载成功:', data)
      console.log('🎯 [Profile] 可用的字段名:', Object.keys(data))
      console.log('🎯 [Profile] 头像字段详细检查:')
      console.log('  - data.path:', data.path)
      console.log('  - data.avatarUrl:', data.avatarUrl)
      console.log('  - data.avatar:', data.avatar)
      
      // 更新医生信息
      Object.assign(doctorInfo, {
        name: data.name || data.doctorName || data.doctor_name || '张医生',
        title: data.title || data.position || '主治医师', 
        department: data.department || '心理科',
        specialization: data.specialization || data.specialty || '心理咨询、认知行为治疗',
        experience: data.experience || data.workYears || 8,
        phone: data.phone || data.phoneNumber || '15354400311',
        email: data.email || data.emailAddress || '15354400371@139.com',
        doctorNo: data.doctorNo || data.doctor_no || data.doctorId || data.id || '213',
        gender: data.gender || data.sex || 1, // 保持原样，在显示时转换
        age: data.age || 25,
        qualificationNo: data.qualificationNo || data.qualification || data.licenseNo || '2343544',
        idCard: data.idCard || data.id_card || data.idNumber || '1304232004121423', // 保持原样，在显示时处理
        level: data.level || data.rank || '中级',
        bio: data.bio || data.description || data.introduction || '资深心理医师，专注于认知行为治疗和心理健康咨询，拥有丰富的临床经验，致力于为患者提供专业、温暖的心理健康服务。',
        avatarUrl: data.path || data.avatarUrl || data.avatar || '' // 头像URL
      })
      
      console.log('🎯 [Profile] 个人资料页面头像URL设置为:', doctorInfo.avatarUrl)
      console.log('🎯 [Profile] 头像设置过程:')
      console.log('  - 原始data.path:', data.path)
      console.log('  - 最终avatarUrl:', doctorInfo.avatarUrl)
      
      // 更新工作统计
      if (data.stats) {
        workStats.value = [
          {
            icon: 'UserFilled',
            label: '总患者数',
            value: String(data.stats.totalPatients || data.stats.patientCount || '128'),
            color: 'primary'
          },
          {
            icon: 'Calendar',
            label: '今日预约',
            value: String(data.stats.todayAppointments || data.stats.todaySchedule || '5'),
            color: 'success'
          },
          {
            icon: 'Files',
            label: '诊疗记录',
            value: String(data.stats.totalRecords || data.stats.consultationCount || '342'),
            color: 'info'
          },
          {
            icon: 'TrendCharts',
            label: '满意度',
            value: String(data.stats.satisfaction || data.stats.rating || '98') + '%',
            color: 'warning'
          }
        ]
      }
      
      ElMessage.success('医生信息加载成功')
    }
  } catch (error) {
    console.error('加载医生信息失败:', error)
    ElMessage.error('加载医生信息失败: ' + (error.message || '网络错误'))
    
    // 设置默认值以防API失败
    Object.assign(doctorInfo, {
      name: '张真',
      title: '主治医师',
      department: '心理科',
      specialization: '心理咨询、认知行为治疗',
      experience: 8,
      phone: '15354400311',
      email: '15354400371@139.com',
      doctorNo: '213',
      gender: 1, // 1=男，2=女
      age: 25,
      qualificationNo: '2343544',
      idCard: '1304232004121423', // 完整身份证号，显示时自动脱敏
      level: '中级',
      bio: '资深心理医师，专注于认知行为治疗和心理健康咨询，拥有丰富的临床经验，致力于为患者提供专业、温暖的心理健康服务。'
    })
  } finally {
    loading.value = false
  }
}

const loadDockerInfo = async () => {
  try {
    // 模拟Docker信息
    dockerInfo.lastUpdated = new Date()
  } catch (error) {
    console.error('加载Docker信息失败:', error)
  }
}

// 操作函数
const editBasicInfo = () => {
  ElMessage.info('基本信息编辑功能开发中...')
}

const editQualifications = () => {
  ElMessage.info('专业资质编辑功能开发中...')
}

const changePassword = () => {
  // 重置表单
  Object.assign(passwordForm, {
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
  })
  passwordDialogVisible.value = true
}

const manageFaceRecognition = () => {
  router.push('/recognition')
}

const viewLoginHistory = () => {
  ElMessage.info('登录历史功能开发中...')
}

// 保存医生信息到后端
const saveDoctorInfo = async (updateData) => {
  try {
    const doctorId = localStorage.getItem('doctorId') || localStorage.getItem('userId') || '1'
    await updateDoctorProfile(doctorId, updateData)
    ElMessage.success('信息更新成功')
    return true
  } catch (error) {
    console.error('保存医生信息失败:', error)
    ElMessage.error('保存失败: ' + (error.message || '网络错误'))
    return false
  }
}

const editBio = async () => {
  try {
    const { value } = await ElMessageBox.prompt('请输入个人简介', '编辑简介', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputValue: doctorInfo.bio,
      inputType: 'textarea',
      inputValidator: (value) => {
        if (!value || value.trim().length === 0) {
          return '简介不能为空'
        }
        if (value.length > 500) {
          return '简介长度不能超过500字符'
        }
        return true
      }
    })
    
    const newBio = value.trim()
    
    // 保存到后端
    const success = await saveDoctorInfo({ bio: newBio })
    if (success) {
      doctorInfo.bio = newBio
    }
  } catch {
    // 用户取消
  }
}

// 头像上传相关函数
const changeAvatar = () => {
  avatarInputRef.value.click()
}

const handleAvatarUpload = async (event) => {
  const file = event.target.files[0]
  if (!file) return

  // 验证文件类型
  if (!file.type.startsWith('image/')) {
    ElMessage.error('请选择图片文件')
    return
  }

  // 验证文件大小（5MB）
  const maxSize = 5 * 1024 * 1024
  if (file.size > maxSize) {
    ElMessage.error('图片大小不能超过5MB')
    return
  }

  try {
    uploadingAvatar.value = true
    
    const doctorId = localStorage.getItem('doctorId') || localStorage.getItem('userId') || '1'
    const response = await uploadDoctorAvatar(doctorId, file)
    
    if (response && response.data) {
      doctorInfo.avatarUrl = response.data
      
      // 同步更新localStorage中的医生信息，供其他页面使用
      const doctorInfo_cache = localStorage.getItem('doctorInfo')
      if (doctorInfo_cache) {
        const info = JSON.parse(doctorInfo_cache)
        info.avatarUrl = response.data
        localStorage.setItem('doctorInfo', JSON.stringify(info))
        console.log('已更新localStorage中的头像URL:', response.data)
      } else {
        // 如果localStorage中没有doctorInfo，创建一个新的
        const newDoctorInfo = {
          doctorName: doctorInfo.name,
          avatarUrl: response.data,
          phone: doctorInfo.phone || '',
          email: doctorInfo.email || '',
          department: doctorInfo.department || ''
        }
        localStorage.setItem('doctorInfo', JSON.stringify(newDoctorInfo))
        console.log('已创建localStorage中的医生信息，包含头像URL:', response.data)
      }
      
      // 触发自定义事件，通知其他组件头像已更新
      window.dispatchEvent(new CustomEvent('avatarUpdated', { 
        detail: { avatarUrl: response.data } 
      }))
      
      ElMessage.success('头像上传成功')
    }
    
  } catch (error) {
    console.error('头像上传失败:', error)
    ElMessage.error('头像上传失败: ' + (error.message || '网络错误'))
  } finally {
    uploadingAvatar.value = false
    // 清空文件输入框
    event.target.value = ''
  }
}

// 密码修改相关函数
const submitPasswordChange = async () => {
  // 表单验证
  if (!passwordForm.currentPassword) {
    ElMessage.error('请输入当前密码')
    return
  }
  
  if (!passwordForm.newPassword) {
    ElMessage.error('请输入新密码')
    return
  }
  
  if (passwordForm.newPassword.length < 6) {
    ElMessage.error('新密码长度至少6位')
    return
  }
  
  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    ElMessage.error('两次输入的新密码不一致')
    return
  }
  
  if (passwordForm.currentPassword === passwordForm.newPassword) {
    ElMessage.error('新密码不能与当前密码相同')
    return
  }

  try {
    const doctorId = localStorage.getItem('doctorId') || localStorage.getItem('userId') || '1'
    
    await changeDoctorPassword(doctorId, {
      currentPassword: passwordForm.currentPassword,
      newPassword: passwordForm.newPassword,
      confirmPassword: passwordForm.confirmPassword
    })
    
    ElMessage.success('密码修改成功')
    passwordDialogVisible.value = false
    
    // 重置表单
    Object.assign(passwordForm, {
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    })
    
  } catch (error) {
    console.error('密码修改失败:', error)
    ElMessage.error('密码修改失败: ' + (error.message || '网络错误'))
  }
}

const cancelPasswordChange = () => {
  passwordDialogVisible.value = false
  Object.assign(passwordForm, {
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
  })
}
</script>

<style scoped>
.doctor-personal-profile {
  width: 100%;
  height: 100%;
  background: transparent;
  padding: 24px;
  overflow-y: auto;
  box-sizing: border-box;
}

/* 加载状态样式 */
.loading-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

.skeleton-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
  padding: 32px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 24px;
}

.skeleton-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.skeleton-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
}

.profile-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 头部卡片 - 温暖橙色渐变，与整体主题协调 */
.profile-header-card {
  background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 50%, #ff9a9e 100%);
  background-size: 200% 200%;
  animation: gentleFlow 12s ease infinite;
  border-radius: 24px;
  padding: 32px;
  color: white;
  box-shadow: 
    0 25px 50px rgba(255, 126, 95, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

@keyframes gentleFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.profile-header-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 2px, transparent 2px),
    radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 60px 60px, 100px 100px, 40px 40px;
  animation: starTwinkle 20s linear infinite;
  pointer-events: none;
}

@keyframes starTwinkle {
  0%, 100% { 
    opacity: 1;
    transform: translateY(0px);
  }
  50% { 
    opacity: 0.7;
    transform: translateY(-10px);
  }
}

/* 优雅的光晕效果 */
.profile-header-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: rotateGlow 25s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes rotateGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 简洁的魔法粒子效果 */
.profile-header-card .magic-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}

.profile-header-card .magic-particles::before,
.profile-header-card .magic-particles::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: gentleSparkle 4s ease infinite;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

.profile-header-card .magic-particles::before {
  top: 25%;
  left: 20%;
  animation-delay: 0s;
}

.profile-header-card .magic-particles::after {
  top: 70%;
  left: 75%;
  animation-delay: 2s;
}

@keyframes gentleSparkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.header-gradient {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.avatar-container {
  position: relative;
}

.main-avatar {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 4px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.main-avatar:hover {
  transform: scale(1.05) rotate(5deg);
  box-shadow: 0 20px 40px rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 180, 123, 0.8);
}

.avatar-badge {
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #ff7e5f, #feb47b, #ff9a9e);
  background-size: 200% 200%;
  animation: badgeGlow 3s ease infinite;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: 3px solid white;
  box-shadow: 0 8px 20px rgba(255, 126, 95, 0.4);
}

@keyframes badgeGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.change-avatar-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 180, 123, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.change-avatar-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s ease;
}

.change-avatar-btn:hover {
  background: linear-gradient(135deg, rgba(255, 180, 123, 0.5), rgba(255, 154, 158, 0.5));
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 25px rgba(255, 126, 95, 0.4);
}

.change-avatar-btn:hover::before {
  left: 100%;
}

.profile-info {
  text-align: center;
}

.doctor-name {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: #ffffff;
  text-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(255, 255, 255, 0.5);
  animation: nameGlow 3s ease infinite alternate;
}

@keyframes nameGlow {
  0% { 
    text-shadow: 
      2px 2px 4px rgba(0, 0, 0, 0.3),
      0 0 20px rgba(255, 255, 255, 0.5);
  }
  100% { 
    text-shadow: 
      2px 2px 4px rgba(0, 0, 0, 0.3),
      0 0 30px rgba(255, 255, 255, 0.8),
      0 0 40px rgba(255, 180, 123, 0.8);
  }
}

.doctor-title {
  font-size: 18px;
  opacity: 0.9;
  margin: 0 0 20px 0;
  font-weight: 500;
  animation: fadeInUp 1s ease 0.5s both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 0.9;
    transform: translateY(0);
  }
}

.doctor-tags {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.tag {
  padding: 8px 18px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  backdrop-filter: blur(15px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  animation: tagFloat 3s ease infinite;
}

.tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.tag:hover::before {
  left: 100%;
}

.tag:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
}

.tag.primary {
  background: linear-gradient(135deg, rgba(255, 154, 158, 0.5), rgba(254, 180, 123, 0.5));
  border-color: rgba(255, 180, 123, 0.7);
}

.tag.success {
  background: linear-gradient(135deg, rgba(255, 126, 95, 0.4), rgba(254, 180, 123, 0.4));
  border-color: rgba(255, 154, 158, 0.6);
}

.tag.warning {
  background: linear-gradient(135deg, rgba(254, 180, 123, 0.5), rgba(255, 154, 158, 0.5));
  border-color: rgba(255, 126, 95, 0.7);
}

@keyframes tagFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

.contact-info {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  opacity: 0.9;
}


/* 统计卡片 */
.stats-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.stat-icon.primary {
  background: linear-gradient(135deg, #409eff, #1890ff);
}

.stat-icon.success {
  background: linear-gradient(135deg, #67c23a, #52c41a);
}

.stat-icon.info {
  background: linear-gradient(135deg, #909399, #595959);
}

.stat-icon.warning {
  background: linear-gradient(135deg, #e6a23c, #fa8c16);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #303133;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 4px;
}

/* 内容网格 */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
}

.info-card.full-width {
  grid-column: 1 / -1;
}

.info-card.modern {
  background: white;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}

.info-card.modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 24px 16px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.header-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.header-icon.primary {
  background: linear-gradient(135deg, #409eff, #1890ff);
}

.header-icon.success {
  background: linear-gradient(135deg, #67c23a, #52c41a);
}

.header-icon.info {
  background: linear-gradient(135deg, #909399, #595959);
}

.header-icon.warning {
  background: linear-gradient(135deg, #e6a23c, #fa8c16);
}

.header-text {
  flex: 1;
}

.header-text h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.edit-btn {
  color: #909399;
  transition: all 0.3s ease;
}

.edit-btn:hover {
  color: #409eff;
  transform: scale(1.1);
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.status-indicator.online {
  color: #67c23a;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.card-content {
  padding: 24px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f5f5f5;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #606266;
}

.label-icon {
  color: #909399;
}

.info-value {
  color: #303133;
  font-weight: 500;
}

/* Docker信息特殊样式 */
.docker-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.docker-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.docker-label {
  font-weight: 500;
  color: #606266;
}

.docker-value {
  color: #303133;
  font-weight: 500;
}

.docker-value.mono {
  font-family: 'Courier New', monospace;
  background: #e8f4fd;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-badge.running {
  background: linear-gradient(135deg, #67c23a, #52c41a);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

/* 安全设置 */
.security-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.security-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.security-item:hover {
  background: #f8f9fa;
  transform: translateX(4px);
}

.security-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f0f0f0, #e8e8e8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #606266;
}

.security-text {
  flex: 1;
}

.security-title {
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.security-desc {
  font-size: 14px;
  color: #909399;
}

.arrow-icon {
  color: #c0c4cc;
  transition: all 0.3s ease;
}

.security-item:hover .arrow-icon {
  color: #409eff;
  transform: translateX(4px);
}

/* 个人简介 */
.bio-content {
  line-height: 1.8;
  color: #606266;
  font-size: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #409eff;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
  
  .header-gradient {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .doctor-personal-profile {
    padding: 16px;
  }
  
  .profile-header-card {
    padding: 24px;
  }
  
  .doctor-name {
    font-size: 28px;
  }
  
  .stats-section {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .contact-info {
    flex-direction: column;
    gap: 16px;
  }
  
  .doctor-tags {
    flex-direction: column;
    align-items: center;
  }
}

/* 密码修改对话框样式 */
.dialog-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.el-dialog {
  border-radius: 16px;
}

.el-dialog__header {
  padding: 24px 24px 0;
}

.el-dialog__body {
  padding: 20px 24px;
}

.el-dialog__footer {
  padding: 20px 24px 24px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input {
  border-radius: 8px;
}

@media (max-width: 480px) {
  .stats-section {
    grid-template-columns: 1fr;
  }
  
  .card-header {
    padding: 20px 20px 12px 20px;
  }
  
  .card-content {
    padding: 20px;
  }
}
</style>